// 购物车

<template >
    <div style="width:100%; margin:auto;">
        <template>
            <div id="Point">
            <!-- 顶部 -->
            <el-header id="xd" style="background-color:#f2f2f2; height:100px;">
                <!-- 根据参数切换请求的路由 -->
                    <div style="padding-right: 20%;width:1400px;margin:auto;">
                        <p style="margin:0;font-size:26px; padding-top:20px;" id="biaoqian">我的购物车</p>
                        <el-breadcrumb separator-class="el-icon-arrow-right">
                            <el-breadcrumb-item :to="{ path: '/index/true/home' }">首页</el-breadcrumb-item>
                            <el-breadcrumb-item>购物车</el-breadcrumb-item>
                        </el-breadcrumb>
                    </div>
            </el-header>
            </div>
        </template>

        <el-aside style="width:100%;margin-left:100px">
            <template>
            <el-table
                :data="tableData"
                style="width:800px">
                <el-table-column
                label="产品名称"
                width="100">
                <template slot-scope="scope">
                    <img width="50px" height="50px" :src="scope.row.img" alt="">
                </template>
                </el-table-column>

                <el-table-column
                label="这才是真名字"
                width="280">
                <template slot-scope="scope">
                    <span style="margin-left: 10px">{{ scope.row.product_name }}</span>
                </template>
                </el-table-column>

                <el-table-column
                label="数量"
                width="180">
                <template slot-scope="scope">
                    <span style="margin-left: 10px">
                        <div style="text-align: center;">
                            <el-input-number v-model="scope.row.number" size="mini" :min="1" :max="10" label="描述文字"></el-input-number>
                            <p>x￥{{scope.row.single}}</p>
                        </div>
                    </span>
                </template>
                </el-table-column>

                <el-table-column
                label="合计价格"
                width="100">
                <template slot-scope="scope">
                    <span style="margin-left: 10px">￥{{ scope.row.single *  scope.row.number}}</span>
                </template>
                </el-table-column>

                <el-table-column label="操作">
                <template slot-scope="scope">
                    <el-button type="danger" icon="el-icon-delete" circle></el-button>    
                </template>
                </el-table-column>
            </el-table>
            </template>
        </el-aside>
      




    </div>


</template>

<script>
export default {
    data() {
        return {
            tableData: [{
                product_name: '密园小农新鲜西兰花500g当天捕菜',
                img:'https://gimg2.baidu.com/image_search/src=http%3A%2F%2F5b0988e595225.cdn.sohucs.com%2Fimages%2F20181224%2F262b8b74df17411c850f772dc832fba2.jpeg&refer=http%3A%2F%2F5b0988e595225.cdn.sohucs.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1614487419&t=379242a8dc1eb783575279c7bc0caf92',
                number:3,
                single:21.00,
            },
            {
                product_name: '鮮游记培溪室白肉室袖2个装的25kKq福建平和新鲜子',
                img:'https://gimg2.baidu.com/image_search/src=http%3A%2F%2F5b0988e595225.cdn.sohucs.com%2Fimages%2F20181224%2F262b8b74df17411c850f772dc832fba2.jpeg&refer=http%3A%2F%2F5b0988e595225.cdn.sohucs.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1614487419&t=379242a8dc1eb783575279c7bc0caf92',
                number:3,
                single:36.00,
            },
            {
                product_name: '寻真水果山东烟台栖霞红富士苹果16-24个5g新水果',
                img:'https://gimg2.baidu.com/image_search/src=http%3A%2F%2F5b0988e595225.cdn.sohucs.com%2Fimages%2F20181224%2F262b8b74df17411c850f772dc832fba2.jpeg&refer=http%3A%2F%2F5b0988e595225.cdn.sohucs.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1614487419&t=379242a8dc1eb783575279c7bc0caf92',
                number:1,
                single:73.50,
            },
            ]
        }
    }
}
</script>

<style>

</style>